<!-- 微博输入框 -->
<div class="margin-bottom-10 padding-bottom-10 border-bottom">
  <textarea class="form-control" id="text-content" rows="3"></textarea>
  <div class="margin-top-10">
    <button class="btn btn-primary" id="btn-submit">发表</button>
    &nbsp;
    <a href="#" id="btn-add-img">
      <i class="fa fa-picture-o"></i>
      插入一张图片
    </a>
    <input type="file" accept="image/*" id="file-picture" style="display: none;">
    <input type="hidden" id="input-img-url">
    &nbsp;
    <span id="span-img-name"></span>
  </div>
</div>

<script>
  $(function () {
    var $spanImgName = $('#span-img-name')
    var $inputImgUrl = $('#input-img-url')
    var $textContent = $('#text-content')
    var $filePicture = $('#file-picture')

    // 上传图片
    $filePicture.change(function (e) {
      var file = $filePicture[0].files[0]
      $spanImgName.text(file.name)
      ajax.upload('/api/utils/upload', file, function (err, data) {
        if (err) {
          alert(err)
          return
        }
        // 成功
        $inputImgUrl.val(data.url)
      })
    })

    // 插入图片
    $('#btn-add-img').click(function (e) {
      e.preventDefault()
      //  开始选择图片
      $filePicture.click()
    })

    // 发布微博
    $('#btn-submit').click(function () {
      var content = $textContent.val().trim()
      var imgUrl = $inputImgUrl.val() || ''

      // 验证
      if (content.length === 0) {
        alert('请输入微博内容')
        return
      }

      // 发布
      ajax.post('/api/blog/create', {
        content: content,
        image: imgUrl
      }, function (err) {
        if (err) {
          // 失败
          alert(err)
          return
        }
        // 成功
        $filePicture.val('')
        $spanImgName.text('')
        $textContent.val('')
        $inputImgUrl.val('')

        // 刷新页面
        location.href = location.pathname
      })
    })

    // @ 功能
    $textContent.atwho({
      at: '@',
      data: '/api/user/getAtList'
      // data: ['Peter', 'Tom', 'Anne']
    })
  })
</script>